<template>
	<view v-if="isRender">
		<view class="nova-box">
			<view class="title-box">
				<view class="left">
					<image src="/static/images1/nova-icon.png" style="width: 80rpx; height:80rpx;"></image>
					<text>Nova</text>
				</view>
				<view class="right">
					<view>
						{{getStr('airDrop.total')}}:
						<text>{{novaInfo.circulation}}</text>
					</view>
					<view>
						{{getStr('airDrop.accuracy')}}:
						<text>{{novaInfo.contractDecimals}}</text>
					</view>
					<view>
						{{getStr('airDrop.destructionQuantity')}}:
						<text>{{novaInfo.destroy}}</text>
					</view>
					<view>
						{{getStr('airDrop.todayPrice')}}:
						<text>{{userStarBalance.NovaPrice}}</text>
					</view>
					<view>
						{{getStr('airDrop.todayIncreaseRate')}}:
						<text>{{userStarBalance.Increase}}</text>
					</view>
				</view>
			</view>
			<view class="des-box">
				{{getStr('airDrop.des')}}
			</view>
		</view>

		<view class="count-box">
			<view class="current-balance">
				{{getStr('airDrop.currentBalance')}} STAR：{{userStarBalance.balance || 0.00}}<br>
				{{getStr('airDrop.currentBalance')}} NOVA：{{userNovaBalance.balance || 0.00}}
			</view>
			
			<view v-if="exchangeType == 'Star'">
				<view class="item">
					<view class="left">
						<image src="/static/images1/star-icon.png" style="width: 60rpx; height:60rpx;"></image>
						<text>Star</text>
					</view>
					<view class="right">
						<up-input :placeholder="getStr('airDrop.total.placeholder')" border="none" color="#ffffff" v-model="number"
							inputAlign="right" @change="changeNumber"></up-input>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/images1/nova-icon.png" style="width: 60rpx; height:60rpx;"></image>
						<text>Nova</text>
					</view>
					<view class="right">
						<up-input :placeholder="getStr('airDrop.obtainQuantity.placeholder')" border="none" color="#ffffff"
							v-model="getNumber" inputAlign="right"></up-input>
					</view>
				</view>
			</view>

			<!-- <view v-if="exchangeType == 'Nova'">
				<view class="item">
					<view class="left">
						<image src="/static/images1/nova-icon.png" style="width: 60rpx; height:60rpx;"></image>
						<text>Nova</text>
					</view>
					<view class="right">
						<up-input :placeholder="getStr('airDrop.total.placeholder')" border="none" color="#ffffff" v-model="number"
							inputAlign="right" @change="changeNumber"></up-input>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/images1/star-icon.png" style="width: 60rpx; height:60rpx;"></image>
						<text>Star</text>
					</view>
					<view class="right">
						<up-input :placeholder="getStr('airDrop.obtainQuantity.placeholder')" border="none" color="#ffffff"
							v-model="getNumber" inputAlign="right"></up-input>
					</view>
				</view>

			</view> -->

			<!-- <view class="switch-box" @click="handleExchangeType">
				<image src="/static/images1/zh.png" style="width: 60rpx; height:60rpx;"></image>
			</view> -->
		</view>

		<view class="btn-box">
			<u-button customStyle="border-radius:12rpx;height:100rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
				:text="getStr('swap.btn.swap')" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)"
				@click="transferShow = true"></u-button>
		</view>

		<view class="day-box">
			<view :class="item.number > 0 ? 'item select' : 'item'" v-for="item in novaMining">
				<view class="left">
					<text>{{item.dayTime}}</text>{{getStr('airDrop.day')}}
				</view>
				<view class="right">
					<!-- <text>数量[500] x 1份</text> -->
					<up-number-box v-model="item.number" :name="item.dayTime" step="1" :min="0" @change="changeNovaMiningNumber">
						<template v-slot:minus>
							<view class="minus">
								<up-icon name="minus" color="#000000" size="12"></up-icon>
							</view>
						</template>
						<template v-slot:input>
							<text style="text-align: center;" class="input">{{item.number}} {{getStr('airDrop.share')}}</text>
						</template>
						<template v-slot:plus>
							<view class="plus">
								<up-icon name="plus" color="#000000" size="12"></up-icon>
							</view>
						</template>
					</up-number-box>
					<view class="more-box">
						<image src="/static/images1/index/select-icon.png" style="width: 20rpx; height: 20rpx;"></image>
						<text>
							{{getStr('airDrop.profitStatement')}}：<br>
							<!-- {{getStr('airDrop.u')}}<br> -->
							{{getStr('airDrop.dayIncome')}} {{item.dayRate * 100}}%<br>
							{{getStr('airDrop.forExample1')}} {{item.minStaking}}*{{item.number}}*{{item.dayRate}}=
							{{item.minStaking * item.number * item.dayRate}}Nova
						</text>
					</view>
				</view>
			</view>

		</view>

		<view class="btn-box">
			<u-button customStyle="border-radius:12rpx;height:100rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
				:text="getStr('buy')" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)"
				@click="modalShow = true"></u-button>
		</view>

		<view class="title-content">
			{{getStr('airDrop.record')}}
		</view>

		<view class="table-box">
			<view class="title-box">
				<text>{{getStr('airDrop.type')}}</text>
				<text>{{getStr('airDrop.number')}}</text>
				<text style="width: 25%;display: block;">{{getStr('airDrop.progressCoefficient')}}</text>
				<text>{{getStr('airDrop.currentYield')}}</text>
			</view>
			<view class="item" v-for="item in novaOrder">
				<text>{{item.dayTime}}{{getStr('airDrop.day')}}</text>
				<text>{{item.num}}</text>

				<view style="width:25%;display: flex;justify-content:center; align-items: center;">
					<view style="width: calc(100% - 40rpx);">
						<up-line-progress activeColor="#5AA2E4" :percentage="item.currentOutDay / item.dayTime * 100" height="8"
							:showText="false"></up-line-progress>
					</view>
					<text style="padding-left: 6rpx;">{{item.currentOutDay / item.dayTime * 100}}%</text>
				</view>

				<text>{{item.profit}}</text>
			</view>
		</view>
		<view style="height: calc( 148rpx + env(safe-area-inset-bottom));"></view>
		<view v-if="novaMining.find(item=>item.number > 0)">
			<buyConfirmModal :show="modalShow"
				:title="'数量 ['+novaMining.find(item=>item.number > 0).minStaking+'] x ' + novaMining.find(item=>item.number > 0).number+'份'"
				:describe="novaMining.find(item=>item.number > 0).minStaking * novaMining.find(item=>item.number > 0).number"
				@close="modalShow = false" @confirm="createMiningOrderFn"></buyConfirmModal>
		</view>
		
		<view v-if="transferShow">
			<buyConfirmModal :show="transferShow"
				:title="'STAR:' + number"
				:describe="getStr('swap.btn.swapDes') + ' ' + (number/Number(userStarBalance.NovaPrice)) + ' NOVA'"
				@close="transferShow = false" @confirm="transferFn"></buyConfirmModal>
		</view>
		<!-- <view style="width:100vw;height: calc(100vh - 80rpx); position: fixed; top: 0;left: 0;background-color: rgba(0,0,0,0.8);display: flex;justify-content: center;align-items: center; color: #fff;">{{getStr('notYetOpen')}}</view> -->


		<tabbarVue :current="2"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import buyConfirmModal from '@/components/confirmModal/buy.vue'
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getNovaInfo,
		getUserBalance,
		transfer,
		getNovaOrder,
		getNovaMining,
		createMiningOrder
	} from '@/common/api/common.js'

	const modalShow = ref(false)
	const transferShow = ref(false)

	const number = ref('')
	const getNumber = ref('')

	const isRender = ref(true)

	const value11 = ref(0)

	const novaInfo = ref({})
	const userStarBalance = ref({})
	const userNovaBalance = ref({})

	const exchangeType = ref('Star')

	const novaOrder = ref([])
	const totalPages = ref(0)
	const page = ref(0)
	const pageSize = ref(10)

	const novaMining = ref([])

	const handleExchangeType = () => {
		exchangeType.value = exchangeType.value == 'Star' ? 'Nova' : 'Star'
		number.value = ''
		getNumber.value = ''
		getUserBalanceFn()
	}

	const changeNumber = e => {
		if (exchangeType.value == 'Star') {
			getNumber.value = e / userStarBalance.value.NovaPrice
		}

		if (exchangeType.value == 'Nova') {
			getNumber.value = e * userNovaBalance.value.NovaPrice
		}
	}

	const changeNovaMiningNumber = e => {
		novaMining.value = novaMining.value.map(item => {
			if (item.dayTime == e.name) {
				return {
					...item,
					number: e.value
				}
			} else {
				return {
					...item,
					number: 0
				}
			}
		})
	}



	const getNovaInfoFn = async () => {
		const res = await getNovaInfo()
		if (res.code == 200) {
			novaInfo.value = {
				...res.data,
				destroy: Number(res.data.destroy).toFixed(6)
			}
		}
	}
	const getUserBalanceFn = async () => {
		const starRes = await getUserBalance({
			telegramId: uni.getStorageSync('telegramId'),
			currencyCode: exchangeType.value
		})
		if (starRes.code == 200) {
			userStarBalance.value = starRes.data
		}
		
		const novaRes = await getUserBalance({
			telegramId: uni.getStorageSync('telegramId'),
			currencyCode: 'Nova'
		})
		if (novaRes.code == 200) {
			userNovaBalance.value = novaRes.data
		}
	}
	const transferFn = async () => {
		if(!number.value){
			uni.$u.toast(getStr('airDrop.total.placeholder'))
			return
		}
		const res = await transfer({
			telegramId: Number(uni.getStorageSync('telegramId')),
			mainCurrencyCode: exchangeType.value,
			tradeCurrencyCode: exchangeType.value == 'Star' ? 'Nova' : 'Star',
			amount: Number(number.value)
		})
		if (res.code == 200) {
			number.value = ''
			getNumber.value = ''
			getUserBalanceFn()
			uni.$u.toast(getStr('toast.successfully'))
		} else {
			uni.$u.toast(res.message)
		}
	}

	const getNovaOrderFn = async () => {
		const res = await getNovaOrder({
			telegramId: uni.getStorageSync('telegramId'),
			page: page.value,
			pageSize: pageSize.value
		})
		if (res.code == 200) {
			if (page.value == 0) {
				novaOrder.value = res.data.content
			} else {
				novaOrder.value = novaOrder.value.concat(res.data.content)
			}

			totalPages.value = res.data.totalPages
		}
	}
	const getNovaMiningFn = async () => {
		const res = await getNovaMining()
		if (res.code == 200) {
			novaMining.value = res.data.map(item => {
				return {
					...item,
					number: 0
				}
			})
		}
	}
	const createMiningOrderFn = async () => {
		const res = await createMiningOrder({
			telegramId: Number(uni.getStorageSync('telegramId')),
			miningId: novaMining.value.find(item => item.number > 0).id,
			amount: novaMining.value.find(item => item.number > 0).number
		})
		if (res.code == 200) {
			novaMining.value = novaMining.value.map(item => {
				return {
					...item,
					number: 0
				}
			})
			getNovaOrderFn()
			uni.$u.toast(getStr('toast.successfully'))
		} else {
			uni.$u.toast(res.message)
		}
	}


	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}

	onShow(() => {
		uni.$tg.hideButton()

		getNovaInfoFn()
		getUserBalanceFn()
		getNovaMiningFn()
		getNovaOrderFn()

		setIsRender()
	})

	onReachBottom(() => {
		if (totalPages.value > page.value + 1) {
			page.value += 1
			getNovaOrderFn()
		}
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.nova-box {
		width: calc(100vw - 28rpx - 28rpx);
		margin: 28rpx auto 0;
		background: #262930;
		border-radius: 12rpx;
		padding: 28rpx;
		box-sizing: border-box;

		.title-box {
			display: flex;
			justify-content: space-between;
			// align-items: center;
			align-items: flex-start;
			padding-bottom: 28rpx;
			border-bottom: 1rpx #55555F dashed;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				text {
					padding-left: 10rpx;
				}
			}

			.right {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 4rpx 0;

					text {
						padding-left: 20rpx;
					}
				}
			}
		}

		.des-box {
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF80;
			padding-top: 28rpx;
			line-height: 36rpx;
		}
	}

	.count-box {
		width: calc(100vw - 28rpx - 28rpx);
		margin: 28rpx auto 0;
		background: #262930;
		border-radius: 12rpx;
		box-sizing: border-box;
		position: relative;

		.item:first-child {
			border-bottom: 1rpx #55555F dashed;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 28rpx;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.current-balance {
			width: calc(100% - 28rpx - 28rpx);
			margin: 0 auto;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			padding-bottom: 48rpx;
			padding-top: 48rpx;
			text{
				margin-left: 20rpx;
			}
		}

		.switch-box {
			position: absolute;
			top: 220rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 48rpx auto 40rpx;
	}

	.day-box {
		width: calc(100vw - 28rpx - 28rpx);
		margin: 28rpx auto 0;

		.select {
			background: #262930;
		}

		.item {
			border-radius: 12rpx;
			box-sizing: border-box;
			// background: #262930;
			border: 2rpx solid #262930;
			padding: 40rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			margin-bottom: 10rpx;

			.left {
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;

				text {
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-right: 8rpx;
				}
			}

			.right {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				::v-deep image {
					margin-left: 50rpx;
				}

				.more-box:hover {
					text {
						display: block;
						z-index: 999999;
					}
				}

				.more-box {
					position: relative;

					text {
						display: none;
						position: absolute;
						right: 0;
						top: 0;
						padding: 14rpx 20rpx;
						background-color: #ffffff;
						border-radius: 12rpx;
						color: #262930;
						width: 380rpx;
						line-height: 36rpx;
					}
				}

				text {
					margin-right: 40rpx;
				}
			}
		}
	}

	.title-content {
		width: calc(100vw - 28rpx - 28rpx);
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		margin: 40rpx auto 20rpx;
	}

	.table-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto 0;
		background-color: #262930;
		border-radius: 16rpx;
		padding-bottom: 16rpx;

		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			box-sizing: border-box;
			line-height: 80rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF80;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			padding: 0 30rpx;
			margin-bottom: 16rpx;

			text {
				width: 25%;
				text-align: center;
			}

			text:first-child {
				text-align: left;
			}

			text:last-child {
				text-align: right;
			}
		}

		.item {
			padding: 8rpx 30rpx;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 20rpx;

			text {
				width: 25%;
				text-align: center;
			}

			text:first-child {
				text-align: left;
			}

			text:last-child {
				text-align: right;
			}
		}
	}


	.minus {
		width: 22px;
		height: 22px;
		background-color: #FFFFFF;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.day-box .item .right uni-text {
		margin-right: 0 !important;
	}

	.input {
		padding: 0 5px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FFFFFF;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>